<!--
   Created by IntelliJ IDEA.
   @File sidebar.html
   @Auth liuxing
   @Date 2021/8/22,15:07
   @Email liuxing997@foxmail.com
-->
<div class="col-md-3 left_col" id="sidebar">
    <div class="left_col scroll-view">
        <div class="navbar nav_title" style="border: 0;">
            <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
        </div>

        <div class="clearfix"></div>

        <!-- menu profile quick info -->
        <div class="profile clearfix">
            <div class="profile_pic">
                <span th:if="${session.user.userImage} == null">
					<img name="userImage" src="/images/img.jpg" alt="" class="img-circle profile_img"/>
				</span>
                <span th:if="${session.user.userImage} != null">
					<img name="userImage" th:src="${session.user.userImage}" alt="" class="img-circle profile_img"/>
				</span>
            </div>
            <div class="profile_info">
                <span>Welcome,</span>
                <h2><span name="userName" th:text="${session.user.userName}"></span></h2>
            </div>
        </div>
        <!-- /menu profile quick info -->

        <br/>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h3>General</h3>
                <ul class="nav side-menu">
                    <li shiro:hasAnyRoles="superAdmin,admin,ordinary">
                        <a href="/common/dashboard">Dashboard</a></li>
                    <li><a><i class="fa fa-user"></i> Account <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                            <li shiro:hasAnyRoles="superAdmin,admin,ordinary"><a href="/account/profile">profile</a></li>
                            <li shiro:hasAnyRoles="superAdmin,admin"><a href="/account/users">Users</a></li>
                            <li shiro:hasAnyRoles="superAdmin,admin"><a href="/account/roles">Roles</a></li>
                            <li shiro:hasAnyRoles="superAdmin,admin"><a href="/account/resources">Resource</a></li>
                        </ul>
                    </li>
                    <li shiro:hasAnyRoles="superAdmin,admin,ordinary"><a><i class="fa fa-coffee"></i> Common <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                            <li><a href="#">Index</a></li>
                        </ul>
                    </li>
                    <li shiro:hasAnyRoles="superAdmin,admin,ordinary"><a><i class="fa fa-leaf"></i> Test <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                            <li><a href="/test/index">Thymeleaf Index</a></li>
                            <li><a href="/test/vueIndex">Vue Index</a></li>
                            <li><a>二级菜单<span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu">
                                    <li class="sub_menu"><a href="#">三级菜单</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /sidebar menu -->

        <!-- /menu footer buttons -->
        <div class="sidebar-footer hidden-small">
            <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Logout" href="javascript:;" @click="logout">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
            </a>
        </div>
        <!-- /menu footer buttons -->
    </div>
</div>

<script>
    let sidebar = new Vue({
        el: '#sidebar',
        methods: {
            logout() {
                this.$confirm('确定要退出吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let that = this;
                    $.ajax({
                        url: "/api/logout",
                        success: function (res) {
                            that.$message({
                                type: 'success',
                                message: res.message
                            });
                            window.location.href = "/login";
                        },
                        error: function (err) {
                            that.$message({
                                type: 'error',
                                message: "退出失败！"
                            });
                        }
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '保持登录'
                    });
                });
            }
        }
    });
</script>